<template>
  <!--通用折线图-->
  <componentBox :id="id" :ref="id" :option="config.location">
    <my_chart :key="key" :ref="'chart'+id" :id="'chart'+id" style="height:100%;width: 100%"
              :option="option"></my_chart>
  </componentBox>
</template>

<script>
  import _ from 'lodash'
  import * as u from '@/util/util'
  export default {
    name: "screen_chart_general",
    components: {
      'componentBox': () => import('@/components/screen/componentBox.vue'),
      'my_chart': () => import('@/components/myChart/index.vue'),
    },
    props: {
      id: String,
      config: Object,
    },
    data() {
      return {
        data: [],
        key:1,
      }
    },
    watch:{
      "config.data":{
        handler(newVal){
          this.data=newVal;
          this.key++;
        },
        deep:true,
      },
      "config.option.echartOption":{
        handler(newVal){
          this.key++;
        },
        deep:true,
      },
    },
    created() {
      if(this.config.data.length>0 && this.config.data!=null){
        this.data=u.copyBean(this.config.data);
      }
    },
    computed:{
      // 图表配置项
      option () {
        alert(1);
        const that = this
        // 通过获取传入对象的属性的个数，生成serieArr
        let serieNum = Object.keys(that.data[0]).length - 1
        let serieArr = []
        for (let i = 0; i < serieNum; i++) {
          serieArr.push({
            type: 'line',
          })
        }
        // 返回默认配置项与传入配置合并后的option，生成图表
        return _.merge({
          dataset: {
            source: that.data
          },
          series: serieArr
        }, that.config.option.echartOption);
      }
    }
  }
</script>

<style scoped>
</style>
